<template>
    <div class="content">
        <div class="m-contain">
              <el-tabs tab-position="left" v-model="activeName"  @tab-click="handleClick">
                <el-tab-pane label="个人主页" name="PersonalHomepage">
                    <div class="personalMsg">
                        <div class="basic-msg">
                            <p class="title">基本信息</p>
                            <div class="main-msg">
                                <div class="nickname" @mouseenter="showEdit01()"  @mouseleave="hideEdit01()" style="margin-bottom: 20px">
                                    <span class="tag">昵称</span>
                                    <span v-if="editText01">{{userInfo.nickname}}<el-link icon="el-icon-edit" style="margin-left: 20px" v-if="editIcon01" @click.native="showEditInput01()">编辑</el-link></span>
                                    <span v-if="editInput01"><el-input style="width: 300px; margin-right: 20px" v-model="userInfo.nickname"></el-input><el-button type="primary" size="small" round @click="comfirm01()">提交</el-button><el-button size="small" round @click="cancel01()">取消</el-button></span>
                                </div>
                                <div class="avatar" @mouseenter="showEdit02()"  @mouseleave="hideEdit02()"  style="margin-bottom: 20px;">
                                    <span class="tag">头像</span>
                                    <el-avatar :size="80" :src="userInfo.avatar" style="vertical-align: middle; margin-right: 20px"></el-avatar>
                                    <!-- 文件上传按钮 -->
                                    <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true" v-if="editIcon02">更换头像
                                    </el-button>
                                    <image-cropper
                                        v-show="imagecropperShow"
                                        :width="300"
                                        :height="300"
                                        :key="imagecropperKey"
                                        :url="upload_API"
                                        field="file"
                                        @close="close"
                                        @crop-upload-success="cropSuccess"/>
                                </div>
                                <!-- 手机号 -->
                                <div class="mobile" @mouseenter="showEdit03()"  @mouseleave="hideEdit03()" style="margin-bottom: 20px">
                                    <span class="tag">手机号码</span>
                                    <span v-if="editText03">{{userInfo.mobile}}<el-link icon="el-icon-edit" style="margin-left: 20px" v-if="editIcon03" @click.native="showEditInput03()">编辑</el-link></span>
                                    <span v-if="editInput03"><el-input style="width: 300px; margin-right: 20px" v-model="userInfo.mobile"></el-input><el-button type="primary" size="small" round @click="comfirm03()">提交</el-button><el-button size="small" round @click="cancel03()">取消</el-button></span>
                                </div>
                                <!-- 密码 -->
                                <div class="password" @mouseenter="showEdit04()"  @mouseleave="hideEdit04()" style="margin-bottom: 20px">
                                    <span class="tag">账号密码</span>
                                    <span v-if="editText04"><el-link icon="el-icon-edit" style="margin-left: 20px" v-if="editIcon04" @click.native="showEditInput04()">编辑</el-link></span>
                                    <span v-if="editInput04"><el-input style="width: 300px; margin-right: 20px" v-model="password" show-password></el-input><el-button type="primary" size="small" round @click="comfirm04()">提交</el-button><el-button size="small" round @click="cancel04()">取消</el-button></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="我的文章" name="MyArticle">
                    <el-timeline style="font-size: 16px" v-for="(article) in userArticleList" :key="article.id">
                        <el-timeline-item :timestamp="article.gmtModified" placement="top">
                        <el-card>
                            <p class="article_title"><router-link :to="{path: '/article/' + article.id}">{{article.title}}</router-link></p>
                            <p class="article_description">{{article.description}}</p>
                            <p id="view_count">
                                    <i class="el-icon-view"></i>
                                    &nbsp;{{article.viewCount}}</p>
                        </el-card>
                        </el-timeline-item>
                    </el-timeline>
                    <el-pagination
                        background
                        @size-change="siezChangeOfArticle"
                        @current-change="currentChangeOfArticle"
                        :page-size="pageSizeOfArticle"
                        layout="prev, pager, next"
                        :total="totalOfArticle">
                    </el-pagination>
                </el-tab-pane>
                <el-tab-pane label="我的话题" name="MyQuestion">
                    <div class="question"  v-for="question in userQuestionList" :key="question.id">
                        <el-avatar shape="square" :size="80" :src="question.avatar"></el-avatar>
                        <ul id="question-desc-list" style='list-style:none'>
                            <li id="question-title"><router-link :to="{path: '/forum/' + question.id}" style="text-decoration: none">{{question.title}}</router-link></li>
                            <!-- <li id="question-desc">{{question.description}}</li> -->
                            <li id="question-attention">{{question.commentCount}}个回复 ● {{question.viewCount}}次浏览 ● {{question.gmtModified}}</li>
                        </ul>
                    </div>
                    <el-pagination
                        background
                        @size-change="siezChangeOfQuestion"
                        @current-change="currentChangeOfQuestion"
                        :page-size="pageSizeOfQuestion"
                        layout="prev, pager, next"
                        :total="totalOfQuestion">
                    </el-pagination>
                </el-tab-pane>
              </el-tabs>
        </div>
    </div>
</template>

<script>
import cookie from "js-cookie";
import usercenterApi from '@/api/usercenter'
export default {
  data() {
    return {
        activeName: 'PersonalHomepage',

        userInfo: [],
        password: '',

        // 用户昵称
        editText01: true,
        editIcon01: false,
        editInput01: false,
        //用户头像
        editIcon02: false,
        // 手机号码
        editText03: true,
        editIcon03: false,
        editInput03: false,
        // 用户密码
        editText04: true,
        editIcon04: false,
        editInput04: false,

        imagecropperShow : false,//是否显示上传组件（即窗口弹出）
        imagecropperKey : 0,
        upload_API : 'http://localhost:8222/eduoss/fileoss',
       // upload_API : 'http://47.120.39.213:8222/eduoss/fileoss',

        pageSizeOfArticle: 5,
        currentPageOfArticle: 1,
        totalOfArticle: 0,
        userArticleList: [],

        pageSizeOfQuestion: 5,
        currentPageOfQuestion: 1,
        totalOfQuestion: 0,
        userQuestionList: [],

    }
  },

  created() {
    this.getUserInfo()
  },

  methods: {

    handleClick(tab, event) {
        var index = tab.index
        if (index === "1") {
            this.getUserArticleList(this.userInfo.id, this.currentPageOfArticle, this.pageSizeOfArticle)
            return
        }
        if (index === "2") {
            this.getUserQuestionList(this.userInfo.id, this.currentPageOfQuestion, this.pageSizeOfQuestion)
            return
        }
    },

    //根据用户id分页展示所有问题
    getUserQuestionList(userId, page, size) {
      usercenterApi.userQuestionList(userId, page, size).then(response => {
        var data = response.data.data.maps
        this.userQuestionList = data.list
        this.totalOfQuestion = data.total
      })
    },

    //根据用户id分页展示所有文章
    getUserArticleList(userId, page, size) {
        usercenterApi.userArticleList(userId, page, size).then(response => {
            var data = response.data.data.maps
            this.userArticleList = data.list
            this.totalOfArticle = data.total
        })
    },

    siezChangeOfQuestion(size) {
      this.pageSizeOfQuestion = size;
      this.getUserQuestionList(this.userInfo.id, this.currentPageOfQuestion, this.pageSizeOfQuestion);
    },

    currentChangeOfQuestion(page) {
      this.currentPageOfQuestion = page;
      this.getUserQuestionList(this.userInfo.id, this.currentPageOfQuestion, this.pageSizeOfQuestion);
    },

    siezChangeOfArticle(size) {
      this.pageSizeOfArticle = size;
      this.getUserArticleList(this.userInfo.id, this.currentPageOfArticle, this.pageSizeOfArticle);
    },

    currentChangeOfArticle(page) {
      this.currentPageOfArticle = page;
      this.getUserArticleList(this.userInfo.id, this.currentPageOfArticle, this.pageSizeOfArticle);
    },

    getUserInfo() {
      //从cookie获取用户信息
      var userStr = cookie.get('ucenter')
      // 把字符串转换json对象(js对象)
      if(userStr) {
        this.userInfo = (JSON.parse(userStr))
        console.log(this.userInfo)
      }
    },

    //上传头像窗口关闭方法
    close() {
      this.imagecropperShow = false
      //类似于初始化图片
      this.imagecropperKey = this.imagecropperKey + 1
    },
    //上传头像成功方法
    cropSuccess(data) {
      this.imagecropperShow = false
      var updateAvatarVo = {}
      updateAvatarVo.id = this.userInfo.id
      updateAvatarVo.avatar = data.data.url
      usercenterApi.updateAvatar(updateAvatarVo).then(response => {
            this.userInfo.avatar = data.data.url
            cookie.set("ucenter", JSON.stringify(this.userInfo), {domain:'localhost'})
            location.reload()
      })
      //类似于初始化图片
      this.imagecropperKey = this.imagecropperKey + 1
    },

    // 用户昵称
    showEdit01() {
        this.editIcon01 = true
    },
    hideEdit01() {
        this.editIcon01 = false
    },
    showEditInput01() {
        this.editText01 = false
        this.editIcon01 = false
        this.editInput01 = true
    },
    comfirm01() {
        this.editText01 = true
        this.editIcon01 = false
        this.editInput01 = false
        usercenterApi.updateNickname(this.userInfo.id, this.userInfo.nickname).then(response => {
            cookie.set("ucenter", JSON.stringify(this.userInfo), {domain:'localhost'})
            location.reload()
        })
    },
    cancel01() {
        this.editText01 = true
        this.editIcon01 = false
        this.editInput01 = false
    },
    // 用户头像
    showEdit02() {
        this.editIcon02 = true
    },
    hideEdit02() {
        this.editIcon02 = false
    },
    // 手机号码
    showEdit03() {
        this.editIcon03 = true
    },
    hideEdit03() {
        this.editIcon03 = false
    },
    showEditInput03() {
        this.editText03 = false
        this.editIcon03 = false
        this.editInput03 = true
    },
    comfirm03() {
        this.editText03 = true
        this.editIcon03 = false
        this.editInput03 = false
        usercenterApi.updateMobile(this.userInfo.id, this.userInfo.mobile).then(response => {
            cookie.set("ucenter", JSON.stringify(this.userInfo), {domain:'localhost'})
            location.reload()
        })
    },
    cancel03() {
        this.editText03 = true
        this.editIcon03 = false
        this.editInput03 = false
    },
    // 用户密码
    showEdit04() {
        this.editIcon04 = true
    },
    hideEdit04() {
        this.editIcon04 = false
    },
    showEditInput04() {
        this.editText04 = false
        this.editIcon04 = false
        this.editInput04 = true
    },
    comfirm04() {
        this.editText04 = true
        this.editIcon04 = false
        this.editInput04 = false
        usercenterApi.updatePassword(this.userInfo.id, this.password).then(response => {
            this.userInfo.password = this.password
            cookie.set("ucenter", JSON.stringify(this.userInfo), {domain:'localhost'})
            location.reload()
        })
    },
    cancel04() {
        this.editText04 = true
        this.editIcon04 = false
        this.editInput04 = false
    },
  },
}
</script>


<style scoped>
.content {
  /* 上 右 下 左 */
  margin: 10px 0px 340px 0px;
  /* padding-bottom: 100px; */
}

.m-contain {
  max-width: 1150px;
  margin: 0 auto;
  margin-top: 45px;
}

.basic-msg .title {
    font-size: 18px;
    color: #2e2e2e;
    font-weight: 600;
    border-bottom: 1px solid #f0f0f2;
    padding-bottom: 10px;
}

.main-msg {
    margin-top: 20px;
    font-size: 18px;
}

.tag {
    margin-right: 20px;
}

#view_count {
    color: #999AAA;
    text-align: right;
}

p.article_description {
    color: #999AAA;
    margin-top: 10px;
}

.el-pagination {
  margin-top: 40px;
  margin-bottom: 40px;
}

.question {
    width: 100%;
    margin-bottom: 30px;
}

.el-avatar {
    border: 1px solid;
    border-radius: 5px;
}

#question-desc-list {
    list-style:none;
    display: inline-block;
    vertical-align: top;
    margin-left: 10px;
}

#question-title {
    font-size: 20px;
}

#question-desc {
    font-size: 18px;
}

#question-attention {
    font-size: 16px;
    color: #C0C0C0;
    margin-top: 20px;
}


</style>